<template>
  <div class="permissions">
    <a-button type="primary">添加权限</a-button>

    <a-table :columns="columns" :data-source="data" />
  </div>

</template>
<script lang="ts" setup>
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '标识',
    dataIndex: 'sign',
  },
  {
    title: '描述',
    dataIndex: 'describe',
  },
  {
    title: '操作',
    dataIndex: 'operate',
  }
];

interface DataItem {
  key: number;
  name: string;
  sign: number;
  describe: string;
  children?: DataItem[];
}

const data: DataItem[] = [
  {
    key: 1,
    name: 'John Brown sr.',
    sign: 60,
    describe: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        name: 'John Brown',
        sign: 42,
        describe: 'New York No. 2 Lake Park',
      },
      {
        key: 12,
        name: 'John Brown jr.',
        sign: 30,
        describe: 'New York No. 3 Lake Park',
        children: [
          {
            key: 121,
            name: 'Jimmy Brown',
            sign: 16,
            describe: 'New York No. 3 Lake Park',
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: 'Joe Black',
    sign: 32,
    describe: 'Sidney No. 1 Lake Park',
  },
];

</script>

<style lang="scss" scoped>
.permissions {
  padding: 20px;
  background-color: #ffffff;
}
</style>
